<template>
    <div idm-ctrl="idm_module" :id="moduleObject.id" :idm-ctrl-id="moduleObject.id" class="IApplicationWorkbench_app">
        <div class="img-bg"></div>
        <div class="title flex_column" :style="getPositionStyleTitle()">
            <div class="img_box">
                <img :src="getImageUrl(propData.imageTitle,'title')">
            </div>
            <div class="name">{{ propData.nameTitle }}</div>
        </div>
        <div @click="clickApplication(item)" v-for="(item,index) in propData.applications" :key="index" :class="'application_list_' + index" :style="getPositionStyle(item)" class="application_list flex_column">
            <div class="img_box">
                <img :src="getImageUrl(item.image,index)">
            </div>
            <div class="name">{{ item.name }}</div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'IApplicationWorkbench',
    data() {
        return {
            moduleObject: {},
            propData: this.$root.propData.compositeAttr || {
                nameTitle: '文会督应用展示',
                applications: [
                    {
                        url: '',
                        name: '会议中心'
                    },
                    {
                        url: '',
                        name: '督办中心'
                    },
                    {
                        url: '',
                        name: '公文中心'
                    }
                ]
            },
            current_key: '',
            parentHeight: '',
        }
    },
    props: {
    },
    created() {
        this.moduleObject = this.$root.moduleObject
        this.convertAttrToStyleObject();
    },
    mounted() {
        this.$nextTick(function (params) {

        });
    },
    destroyed() { },
    methods: {
        clickApplication(item) {
            if ( item.jumpUrl ) {
                window.open(item.jumpUrl,this.propData.jumpType)
            }
        },
        getImageUrl(url,key) {
            if ( url ) {
                return IDM.url.getWebPath(url)
            } else {
                return IDM.url.getModuleAssetsWebPath(require(`../assets/workbench_${key}.png`),this.moduleObject)
            }
        },
        getPositionStyleTitle() {
            let styleObject = {};
            if ( this.propData.boxTitle ) {
                IDM.style.setBoxStyle(styleObject,this.propData.boxTitle)
            }
            styleObject['left'] = this.propData.leftTitle;
            styleObject['right'] = this.propData.rightTitle;
            styleObject['top'] = this.propData.topTitle;
            styleObject['bottom'] = this.propData.bottomTitle;
            return styleObject
        },
        getPositionStyle(item) {
            let styleObject = {};
            if ( item.box ) {
                IDM.style.setBoxStyle(styleObject,item.box)
            }
            styleObject['top'] = item.top;
            styleObject['bottom'] = item.bottom;
            styleObject['left'] = item.left;
            styleObject['right'] = item.right;
            return styleObject
        },
        /**
         * 提供父级组件调用的刷新prop数据组件
         */
        propDataWatchHandle(propData) {
            this.propData = propData.compositeAttr || {};
            this.convertAttrToStyleObject();
        },
        convertThemeListAttrToStyleObject() {
            const themeList = this.propData.themeList;
            if ( (!themeList) || !themeList.length ) {
                return
            }
            const themeNamePrefix = IDM.setting && IDM.setting.applications && IDM.setting.applications.themeNamePrefix ? IDM.setting.applications.themeNamePrefix : "idm-theme-";
            for (var i = 0; i < themeList.length; i++) {
                var item = themeList[i];
                
                if(item.key!=IDM.theme.getCurrentThemeInfo()){
                    //此处比对是不渲染输出不用的样式，如果页面会刷新就可以把此处放开
                    continue;
                }
                let borderObject = {
                    'border-color': item.mainColor ? item.mainColor.hex8 : "",
                }
                IDM.setStyleToPageHead( "." + themeNamePrefix + item.key + " #" + (this.moduleObject.packageid || "module_demo") + " .ant-select-selection:hover", borderObject );
                IDM.setStyleToPageHead( "." + themeNamePrefix + item.key + " #" + (this.moduleObject.packageid || "module_demo") + " .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active", borderObject );
            }
        },
        /** * 把属性转换成样式对象 */
        convertAttrToStyleObjectTitle() {
            var styleObject = {};
            var styleObjectImage = {};
            for (const key in this.propData) {
                if (this.propData.hasOwnProperty.call(this.propData, key)) {
                    const element = this.propData[key];
                    if (!element && element !== false && element != 0) {
                        continue;
                    }
                    switch (key) {
                        case "widthTitle":
                            styleObject['width'] = element;
                            break;
                        case "heightTitle":
                            styleObject['height'] = element;
                            break;
                        case "widthTitleImg":
                            styleObjectImage['width'] = element;
                            break;
                        case "heightTitleImg":
                            styleObjectImage['height'] = element;
                            break;
                        case "fontTitle":
                            IDM.style.setFontStyle(styleObject,element)
                            break;
                        case "boxTitleImg":
                            IDM.style.setBoxStyle(styleObjectImage,element)
                            break;
                    }
                }
            }
            window.IDM.setStyleToPageHead(this.moduleObject.id + ' .title', styleObject);
            window.IDM.setStyleToPageHead(this.moduleObject.id + ' .title .img_box', styleObjectImage);
        },
        convertAttrToStyleObjectApplication() {
            var styleObject = {};
            var styleObjectImage = {};
            for (const key in this.propData) {
                if (this.propData.hasOwnProperty.call(this.propData, key)) {
                    const element = this.propData[key];
                    if (!element && element !== false && element != 0) {
                        continue;
                    }
                    switch (key) {
                        case "widthApplication":
                            styleObject['width'] = element;
                            break;
                        case "heightApplication":
                            styleObject['height'] = element;
                            break;
                        case "widthApplicationImg":
                            styleObjectImage['width'] = element;
                            break;
                        case "heightApplicationImg":
                            styleObjectImage['height'] = element;
                            break;
                        case "fontApplication":
                            IDM.style.setFontStyle(styleObject,element)
                            break;
                        case "boxApplicationImg":
                            IDM.style.setBoxStyle(styleObjectImage,element)
                            break;
                    }
                }
            }
            window.IDM.setStyleToPageHead(this.moduleObject.id + ' .application_list', styleObject);
            window.IDM.setStyleToPageHead(this.moduleObject.id + ' .application_list .img_box', styleObjectImage);
        },
        convertAttrToStyleObjectBg() {
            var styleObject = {};
            var styleObjectImage = {};
            for (const key in this.propData) {
                if (this.propData.hasOwnProperty.call(this.propData, key)) {
                    const element = this.propData[key];
                    if (!element && element !== false && element != 0) {
                        continue;
                    }
                    switch (key) {
                        case "themeBgImgUrl":
                            styleObject["background-image"] = `url(${window.IDM.url.getWebPath(element)})`;
                            break;
                        case "widthBgImg":
                            styleObject['width'] = element;
                            break;
                        case "heightBgImg":
                            styleObject['height'] = element;
                            break;
                        case "leftBgImg":
                            styleObject['left'] = element;
                            break;
                        case "rightBgImg":
                            styleObject['right'] = element;
                            break;
                        case "topBgImg":
                            styleObject['top'] = element;
                            break;
                        case "bottomBgImg":
                            styleObject['bottom'] = element;
                            break;
                    }
                }
            }
            window.IDM.setStyleToPageHead(this.moduleObject.id + ' .img-bg', styleObject);
        },
        convertAttrToStyleObject() {
            this.convertAttrToStyleObjectTitle()
            this.convertAttrToStyleObjectApplication()
            this.convertAttrToStyleObjectBg()
            var styleObject = {};
            if (this.propData.bgSize && this.propData.bgSize == "custom") {
                styleObject["background-size"] = (this.propData.bgSizeWidth ? this.propData.bgSizeWidth.inputVal + this.propData.bgSizeWidth.selectVal : "auto") + " " + (this.propData.bgSizeHeight ? this.propData.bgSizeHeight.inputVal + this.propData.bgSizeHeight.selectVal : "auto")
            } else if (this.propData.bgSize) {
                styleObject["background-size"] = this.propData.bgSize;
            }
            if (this.propData.positionX && this.propData.positionX.inputVal) {
                styleObject["background-position-x"] = this.propData.positionX.inputVal + this.propData.positionX.selectVal;
            }
            if (this.propData.positionY && this.propData.positionY.inputVal) {
                styleObject["background-position-y"] = this.propData.positionY.inputVal + this.propData.positionY.selectVal;
            }
            for (const key in this.propData) {
                if (this.propData.hasOwnProperty.call(this.propData, key)) {
                    const element = this.propData[key];
                    if (!element && element !== false && element != 0) {
                        continue;
                    }
                    switch (key) {
                        case "width":
                            styleObject[key] = element;
                            break;
                        case "height":
                            if ( (element == 'auto' || element == '') && this.parentHeight ) {
                                styleObject[key] = this.parentHeight + 'px';
                            } else {
                                styleObject[key] = element;
                            }
                            break;
                        case "bgColor":
                            if (element && element.hex8) {
                                styleObject["background-color"] = element.hex8;
                            }
                            break;
                        case "box":
                            IDM.style.setBoxStyle(styleObject,element)
                            break;
                        case "bgImgUrl":
                            styleObject["background-image"] = `url(${window.IDM.url.getWebPath(element)})`;
                            break;
                        case "positionX":
                            //背景横向偏移

                            break;
                        case "positionY":
                            //背景纵向偏移

                            break;
                        case "bgRepeat":
                            //平铺模式
                            styleObject["background-repeat"] = element;
                            break;
                        case "bgAttachment":
                            //背景模式
                            styleObject["background-attachment"] = element;
                            break;
                        case "border":
                            IDM.style.setBorderStyle(styleObject,element)
                            break;
                        case "font":
                            IDM.style.setFontStyle(styleObject,element)
                            break;
                    }
                }
            }
            window.IDM.setStyleToPageHead(this.moduleObject.id, styleObject);
        },
        /**
         * 通用的url参数对象
         * 所有地址的url参数转换
         */
        commonParam() {
            let urlObject = IDM.url.queryObject();
            var params = {
                pageId:
                    window.IDM.broadcast && window.IDM.broadcast.pageModule
                        ? window.IDM.broadcast.pageModule.id
                        : "",
                urlData: JSON.stringify(urlObject),
            };
            return params;
        },
        
        /** * 通用的获取表达式匹配后的结果 */
        getExpressData(dataName, dataFiled, resultData) {
            //给defaultValue设置dataFiled的值
            var _defaultVal = undefined;
            if (dataFiled) {
                var filedExp = dataFiled;
                filedExp =
                    dataName +
                    (filedExp.startsWiths("[") ? "" : ".") +
                    filedExp;
                var dataObject = { IDM: window.IDM };
                dataObject[dataName] = resultData;
                _defaultVal = window.IDM.express.replace.call(
                    this,
                    "@[" + filedExp + "]",
                    dataObject
                );
            }
            //对结果进行再次函数自定义
            if (this.propData.customFunction && this.propData.customFunction.length > 0) {
                var params = this.commonParam();
                var resValue = "";
                try {
                    resValue = window[this.propData.customFunction[0].name] && window[this.propData.customFunction[0].name].call(this, {
                        ...params,
                        ...this.propData.customFunction[0].param,
                        moduleObject: this.moduleObject,
                        expressData: _defaultVal, interfaceData: resultData
                    });
                } catch (error) {
                }
                _defaultVal = resValue;
            }

            return _defaultVal;
        },
        /**
         * 组件通信：接收消息的方法
         * @param {
         *  type:"发送消息的时候定义的类型，这里可以自己用来要具体做什么，统一规定的type：linkageResult（组件联动传结果值）、linkageDemand（组件联动传需求值）、linkageReload（联动组件重新加载）
         * 、linkageOpenDialog（打开弹窗）、linkageCloseDialog（关闭弹窗）、linkageShowModule（显示组件）、linkageHideModule（隐藏组件）、linkageResetDefaultValue（重置默认值）"
         *  message:{发送的时候传输的消息对象数据}
         *  messageKey:"消息数据的key值，代表数据类型是什么，常用于表单交互上，比如通过这个key判断是什么数据"
         *  isAcross:如果为true则代表发送来源是其他页面的组件，默认为false
         * } object 
         */
        receiveBroadcastMessage(object) {
            console.log("组件收到消息", object)
            if (object && object.type == "regionResize" && object.message && object.message.gridEleTarget) {
                let gridEleTarget = object.message.gridEleTarget;
                if (gridEleTarget && gridEleTarget.offsetHeight) {
                    this.parentHeight = gridEleTarget.offsetHeight;
                    this.$nextTick(() => {
                        if ( this.propData.height == 'auto' && gridEleTarget.offsetHeight ) {
                            this.convertAttrToStyleObject()
                        } 
                    })
                }
            }
        },
        /**
         * 组件通信：发送消息的方法
         * @param {
         *  type:"自己定义的，统一规定的type：linkageResult（组件联动传结果值）、linkageDemand（组件联动传需求值）、linkageReload（联动组件重新加载）
         * 、linkageOpenDialog（打开弹窗）、linkageCloseDialog（关闭弹窗）、linkageShowModule（显示组件）、linkageHideModule（隐藏组件）、linkageResetDefaultValue（重置默认值）",
         *  message:{实际的消息对象},
         *  rangeModule:"为空发送给全部，根据配置的属性中设定的值（值的内容是组件的packageid数组），不取子表的，比如直接 this.$root.propData.compositeAttr["attrKey"]（注意attrKey是属性中定义的bindKey）,这里的格式为：['1','2']"",
         *  className:"指定的组件类型，比如只给待办组件发送，然后再去过滤上面的值"
         *  globalSend:如果为true则全站发送消息，注意全站rangeModule是无效的，只有className才有效，默认为false
         * } object 
         */
        sendBroadcastMessage(object) {
            window.IDM.broadcast && window.IDM.broadcast.send(object);
        },
        /**
         * 交互功能：设置组件的上下文内容值
         * @param {
         *  type:"定义的类型，已知类型：pageCommonInterface（页面统一接口返回值）、"
         *  key:"数据key标识，页面每个接口设置的数据集名称，方便识别获取自己需要的数据"
         *  data:"数据集，内容为：字符串 or 数组 or 对象"
         * }
         */
        setContextValue(object) {
            console.log("统一接口设置的值", object);
            if (object.type != "pageCommonInterface") {
                return;
            }
            //这里使用的是子表，所以要循环匹配所有子表的属性然后再去设置修改默认值
            if (object.key == this.propData.dataName) {
                // this.propData.fontContent = this.getExpressData(this.propData.dataName,this.propData.dataFiled,object.data);
                this.$set(this.propData, "fontContent", this.getExpressData(this.propData.dataName, this.propData.dataFiled, object.data));
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.IApplicationWorkbench_app{
    height: 450px;
    position: relative;
    .img_box{
        img{
            width: 100%;
        }
    }
    .img-bg{
        width: 80%;
        height: 80%;
        background-image: url(../assets/workbench.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 80px;
        left: 10%;
    }
    .title{
        width: 220px;
        height: 199px;
        position: absolute;
        text-align: center;
        left: calc(50% - 110px);
        justify-content: flex-end;
        background-image: url(../assets/danger3.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .img_box{
            width: 168px;
            height: 168px;
            margin-bottom: 10px;
        }
    }
    .application_list{
        width: 220px;
        height: 199px;
        text-align: center;
        position: absolute;
        justify-content: flex-end;
        background-image: url(../assets/danger3.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .img_box{
            width: 78px;
            height: 78px;
            margin: 0 auto 45px auto;
        }
    }
    .application_list_0{
        // top: 180px;
        left: calc(10% - 110px);
    }
    .application_list_1{
        left: calc(50% - 110px);
        // bottom: 0px;
    }
    .application_list_2{
        // top: 180px;
        right: calc(10% - 110px);
    }
}
</style>
